<template>
  <div class="consult-list-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item >
        <el-input v-model="searchParams.name" placeholder="课程名称" style="width: 260px" maxlength="50" show-word-limit clearable/>
      </el-form-item>

      <el-form-item >
        <el-input v-model="searchParams.consult" placeholder="咨询内容" style="width: 260px" maxlength="50" show-word-limit clearable/>
      </el-form-item>

      <el-form-item >
        <el-input v-model="searchParams.reply" placeholder="回复内容" style="width: 260px" maxlength="50" show-word-limit clearable/>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="fetchData()" size="medium">查询</el-button>
      <el-button type="warning" icon="el-icon-refresh" @click="resetData()" size="medium">清空</el-button>
    </el-form>

    <!--表格-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="consultId" label="咨询编号" align="center" width="180"/>

      <el-table-column prop="courseName" label="课程名称" align="center" />

      <el-table-column prop="consult" label="咨询内容" align="center" :show-overflow-tooltip='true'/>

      <el-table-column prop="reply" label="回复内容" align="center" :show-overflow-tooltip='true'/>

      <el-table-column prop="gmtCreate" label="咨询时间" align="center" width="180"/>

      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.reply === null" @click="editConsult(scope.row.consultId)">回复</el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.reply !== null" @click="editConsult(scope.row.consultId)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <!-- 回复咨询dialog -->
    <ConsultForm ref="consultForm" @onSaveSuccess="fetchData"/>

  </div>
</template>

<script>
  import { getConsultPageList } from '@/api/consult'
  import { mapGetters } from 'vuex'
  import ConsultForm from '@/views/consult/consultForm'

  export default {
    data(){
      return{
        listLoading: true, // 是否显示loading信息
        list: null, // 数据列表
        total: 0, // 总记录数
        page: 1, // 页码
        limit: 10, // 每页记录数
        searchParams: {},// 查询条件
      }
    },

    methods: {
      fetchData(page = 1){
        // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
        this.page = page
        this.listLoading = true

        getConsultPageList(this.page,this.limit,this.teacherId,this.searchParams)
          .then(result => {
            if (result.success == true){
              this.list = result.data.rows
              this.total = result.data.total
            }
            this.listLoading = false
          })
      },

      resetData() {
        this.searchParams = {}
        this.fetchData()
      },

      editConsult(consulId){
        this.$refs.consultForm.open(consulId)
      }

    },

    created() {
      this.fetchData()
    },

    computed: {
      ...mapGetters({
        'teacherId': 'id'
      })
    },

    components: {
      ConsultForm
    }
  }
</script>

<style scoped>
  .consult-list-container{
    margin-top: 20px;
    margin-left: 15px;
  }
</style>
